<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<div id="app">
    姓名:<input v-model = "name" type="text"/><br/>
    高等数学:<input v-model = "maths" type="text" size="15"/><br/>
    大学物理:<input v-model = "physics" type="text" size="15"/><br/>
    <button   @click="submit" >
        成绩提交
    </button>
    <p><label >数据:</label> {{info}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

  let vm = new Vue({
    el: '#app',
    data () {
      return {
        name: 'li',
        maths: '90',
        physics: '80',
        info: 'www'
      }
    },
    methods: {

        submit: function(){

            axios({
                headers: {
                     'content-type': 'application/json',
                },
                method: 'post',
                url: '/api/html/submitAchievement',
                data: {
                    name: this.name,
                    maths:this.maths,
                    physics:this.physics
                }
            }).then(res => {
                console.log(res);
                this.info = res.data;
            })


          }
    }
  })
</script>
</body>
</html>